<template>
    <div class="content-left">
    <div class="card">
        <el-menu
            :default-active="$route.path"
            class="el-menu-demo"
            mode="horizontal"
            router
            >
                <el-menu-item :index="v.url" v-for="v in list" :key="v.url">
                    <span>{{ v.name }}</span>
                </el-menu-item>
            </el-menu>
            <router-view/>
        </div>
    </div>
</template>
<script setup>

import {ref} from "vue";

const list = ref([
  {name:'关注',url:'/index/interest'},
  {name:'推荐',url:'/index/recommend'},
  {name:'热榜',url:'/index/hotlist'},
  {name:'视频',url:'/index/video'}
])

</script>
<style scoped>
@import '@/assets/css/index.css';

.content-left{
  width: 800px;
  flex-shrink: 0;
  margin-right: 10px;
}
</style>